<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>


<body>

<div>Hello</div>

<!--头部导航工具栏-->
<script type="text/html" id="barDemo">
    <a class="layui-btn" lay-event="save"><i class="layui-icon layui-icon-addition"></i>添加</a>
    <a class="layui-btn layui-btn-danger" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>

<!--侧边工具栏-->
<script type="text/html" id="rowBarDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<table id="demo" lay-filter="test"></table>

<script src="/layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 412
            ,url: '/result/selectAllTesterCharacter' //数据接口
            ,page: true //开启分页
            ,toolbar: '#barDemo'    // 头部导航id
            ,cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'}
                    ,{field: 'tester_id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'tester_name', title: 'name', width:180, sort: true}
                    ,{field: 'testerPhone', title: 'phone', width:180}
                    ,{field: 'red', title: 'red', width: 180}
                    ,{field: 'blue', title: 'blue', width: 180, sort: true}
                    ,{field: 'green', title: 'green', width: 80, sort: true}
                    ,{field: 'yellow', title: 'yellow', width: 80}
                    ,{fixed: 'right', width: 150, align:'center', toolbar: '#rowBarDemo'}
                ]
            ]
        });

    });
</script>
</body>
</html>